<template>
  <c-model v-model="show" title="包时" width="950px" class="packet-time-modal" @close="show = false">
    <span slot="footer"></span>
    <div class="tab-list">
      <div class="tab-item" :class="{'active': active == 1}" @click="changeTab(1)">定额包时</div>
      <div class="tab-item" :class="{'active': active == 2}" @click="changeTab(2)">包时卡</div>
    </div>
    <packet-time ref="packetTime" :memberInfo="memberInfo" @select="(item) => {this.item = item}" v-show="active == 1"/>
    <packet-card ref="packetCard" :memberInfo="memberInfo" @select="(item) => {this.item = item}" v-show="active == 2"/>

    <div class="bottom flex row-between col-bottom">
      <div class="member-info">
        <div class="flex">
          <div>上网卡号：</div>
          {{ memberInfo.memberNumber || '--' }}
        </div>
        <div class="flex">
          <div>上网用户：</div>
          {{ memberInfo.memberName || '--' }}
        </div>
        <div class="flex">
          <div>账户余额：</div>
          <span class="color-red">{{ memberInfo.balance || 0 }}</span>元
          (现金:{{ memberInfo.availMoney || 0 }}元 赠送金:{{ memberInfo.presentedMoney || 0 }}元)
        </div>
        <div class="flex">
          <div>消费模式：</div>
          <div>
            <span class="color-red" v-if="memberInfo.entriesId">
             {{ memberInfo.entriesName }}
              <div>({{ memberInfo.endTime }}结束)</div>
            </span>
            <template v-else>普通消费</template>
          </div>
        </div>
        <div class="flex" v-if="memberInfo.reserveQuotaName">
          <div class="">预定包时：</div>
          <div class="color-red flex-1">{{
              memberInfo.reserveQuotaName
            }}（{{ dateFormat(memberInfo.reserveStartTime, 'hh:mm') + '开始' }}）
          </div>
        </div>
      </div>
      <div>
        <Button type="default" class="submit-btn ml-20" @click="show = false">取消</Button>
        <Button type="primary" class="submit-btn ml-20" :disabled="!item" :class="{disabled: !item}"
                @click="submit">{{ active == 1 ? '余额包时' : '确认使用' }}
        </Button>
      </div>
    </div>
  </c-model>
</template>
<script>
import {getMemberInfo} from "@/api/member";
import {decryptByDESModeCBC} from "@/common/utils/des";
import {addOnLineRateActivity, rateActivity, useRateQuotaCard} from "@/api/packageTime";
import {dateDiff, dateFormat} from "@/common/utils";
import packetTime from "./packetTime.vue";
import packetCard from "./packetCard.vue";

export default {
  name: "index",
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  components: {
    packetTime,
    packetCard
  },
  data() {
    return {
      item: null,
      memberInfo: {},
      active: 1
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
      }
    }
  },
  methods: {
    dateFormat,
    init() {
      this.item = null
      getMemberInfo().then(res => {
        if (res.code == 200) {
          this.memberInfo = JSON.parse(decryptByDESModeCBC(res.msg));
          this.memberInfo.startTime = this.memberInfo.startTime ? dateFormat(this.memberInfo.startTime, 'yyyy-MM-dd hh:mm') : ''
          this.memberInfo.endTime = this.memberInfo.endTime ? dateFormat(this.memberInfo.endTime, 'yyyy-MM-dd hh:mm') : ''
          this.changeTab(1)
        }
      }).catch(res => {

      });
    },
    changeTab(type) {
      this.active = type
      this.item = null
      this.$nextTick(() => {
        if (type == 1) {
          this.$refs.packetTime.getList()
        } else {
          this.$refs.packetCard.getList()
        }
      })
    },
    submit() {
      if (this.active == 1) {
        this.handlePacketTime();
      } else {
        this.handlePacketCard();
      }
    },
    // 定额包时
    handlePacketTime() {
      let time;
      if (this.item.startTime == '00:00' && this.item.endTime == '00:00') {
        time = this.formatTime(this.item.duration)
      } else {
        let year = dateFormat(new Date(), 'yyyy-MM-dd')
        this.item.endTime = this.item.endTime == '00:00' ? '24:00' : this.item.endTime
        time = dateDiff(new Date(), year + ' ' + this.item.endTime + ':00', false)
      }
      this.$cMessageBox.confirm(`距离包时还剩${time}结束，确认继续包时吗？`, '电竞蜂提醒', {
        confirmBtnText: '确定',
        cancelBtnText: '取消',
      }).then(() => {
        addOnLineRateActivity({memberId: this.memberInfo.memberId, activityId: this.item.id}).then(res => {
          if (res.code == 200) {
            this.$Message.success('包时成功')
            this.show = false
          } else {
            this.$Message.error(res.msg || '包时失败，请稍后重试')
          }
        })
      })
    },
    // 包时卡
    handlePacketCard() {
      let lastTime;
      if (this.item.type == 1) {
        lastTime = this.item.endTime
      } else {
        let year = new Date().getFullYear()
        let endTime = this.memberInfo.endTime ? new Date(this.memberInfo.endTime) : new Date()
        endTime = parseInt(endTime.getTime() / 1000)
        lastTime = dateFormat((endTime + parseInt(this.item.duration) * 60) * 1000)
      }
      this.$cMessageBox.confirm(`包时卡使用后不可撤销，使用后至${lastTime}结束包时，确定使用吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        useRateQuotaCard({memberId: this.memberInfo.memberId, cardId: this.item.id}).then(res => {
          if (res.code == 200) {
            this.$Message.success('使用成功')
            this.show = false
          } else {
            this.$Message.error(res.msg)
          }
        })
      })
    },
    formatTime(time) {
      let hour = Math.floor(time / 60)
      let min = Math.floor(time % 60)
      return (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min)
    }
  },
  watch: {
    show() {
      if (this.show) {
        this.init()
      }
    }
  }
}
</script>

<style lang="scss">
.packet-time-modal {
  .tab-list {
    display: flex;
    align-items: center;
    position: relative;

    .tab-item {
      width: 120px;
      padding: 8px 0;
      border: 1px solid $-border-color;
      text-align: center;
      cursor: pointer;

      &:first-child {
        border-right: 0;
      }

      &.active {
        @include font_color();
        border-bottom: 0;
      }

      &.disabled {
        cursor: not-allowed;
      }
    }
  }

  .ivu-table {
    .active {
      td {
        @include background_color();
      }

      color: #000;
    }

    .disabled {
      color: #ccc;
    }
  }

  .bottom {
    line-height: 24px;
    font-size: 14px;
    margin-top: 16px;
    color: #000;
    padding-bottom: 20px;
  }

  .packet-table {
    .table-head {
      background: #f4f4f4;
    }

    .table-body {
      max-height: 350px;
      overflow: auto;
    }

    .table-head, .td {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      text-align: center;
      height: 48px;
      line-height: 48px;
      font-size: 13px;
      position: relative;
      .checked {
        position: absolute;
        left: 0;
        top: 0;
        color: #000;
        line-height: initial;
        padding-left: 3px;
        span {
          position: relative;
          z-index: 1;
          font-size: 8px;
        }
        &:before {
          content: "";
          width: 0;
          height: 0;
          left: 0;
          top: 0;
          position: absolute;
          @include theme_each {
            border-top: 24px solid get_color('default_color');
          }
          border-right: 24px solid transparent;
        }
      }
      .item {
        padding: 0 20px;
        &.title {
          line-height: initial;
          display: flex;
          align-items: center;
        }
      }

      .title {
        text-align: left;
      }
    }

    .tbody {
      margin-top: 12px;
      border: 1px solid #E6E6E6;
      cursor: pointer;
      transition: all .2s;
      .title {
        font-weight: bold;
      }
      .tf {
        background: #E6E6E6;
        height: 32px;
        line-height: 32px;
        padding: 0 20px;
        font-size: 12px;
      }
      &.disabled {
        cursor: not-allowed;
      }
      &.active {
        @include border_color();
        .td {
          @include background_color(1, 'minor_color');
        }
        .tf {
          @include background_color();
        }
      }
    }
    &.packet-time {
      .table-head, .td {
        grid-template-columns: repeat(6, 1fr);
      }
    }
    &.packet-card {
      .table-head, .td {
        .title {
          grid-column: 1/3;
        }
      }
    }
  }
}
</style>
